@import "var.scss";
@import "global.scss";

.user-home-container{


    margin-top: 85px;
    box-sizing: border-box;
    // border: $border;
    overflow: hidden;
    .top-wrap{
        position: relative;
        width:100vw;
        min-width: 800px;
        margin: 0;
        // left: 0;
        // top: 80px;
        height: 350px;
        // border: $border;
        background-image: url('http://image-yunsheng.test.upcdn.net/typora-cloud-img/raw/master/202205311359377.jpeg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position:50% 70%;
        z-index: -999;
        background-attachment: fixed;
    }

    .user-home-wrap{
       
        margin-top: 30px;
        width: 100%;
        // height: 300px;
        // background-color: red;
        // border:$border;
        
        
        .user-home{
            width: 100%;
            max-width:1200px;
            min-width: 800px;
            margin:0 auto;
            display: flex;
            .left-wrap{
                width:30%;
                // border: $border;
                margin-right: 15px;
                .left-user-card{
                    width: 100%;
                    .background{
                        background-image: url('http://image-yunsheng.test.upcdn.net/typora-cloud-img/raw/master/202205311421761.jpeg');
                        width:100%;height: 140px;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: 0 50%;
                    }
                    .user-info{
    
                        display: flex;
                        transform: translateY(-40%);
                        .el-image{
                            width:75px;
                            height: 75px;
                            margin-left: 20px;
                            // border: $border;
                        }
                        .user-level{
                            display:inline-block;
                            width:45px;
                            height: 20px;
                            border-radius: 10px;
                            // border: $border;
                            font-style: italic;
                            text-align: center;
                            font-weight: 600;
                            color:red;
                        }
                        .user-info-right{
                             
                            flex: 1;
                            // border: $border;
                            padding-top: 30px;
                            
    
                            span{
                                margin-right: 10px;
                            }
                            span:first-child{
                                font-weight: 600;
                                margin-left: 10px;
                            }
                        }
                    }
                    .user-profile{
                        width: 100%;
                        // border: $border;
                        padding:0 10px;
                        p{
                            width:300px;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            span{
                                font-weight: 600;
                            }
                        }
                    }
                    .user-follow{
                        width: 100%;
                        height: 100px;
                        // border: $border;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        list-style: none;
                        margin-top: 10px;
                        // padding-bottom: 80px;
                        li{
                            // border: $border;
                            text-align: center;
                            color: #666;
                            cursor: pointer;
                            span{
                                display: block;
                            }
                        }
                        li:hover{
                            color:red;
                        }
                    }
                   
                }
                .user-playlist{
                    margin-top: 20px;
                    .my-playlist{
                        display: flex;
                        justify-content:space-between;
                        flex-wrap: wrap;
                    }
                }
            }
            .right-wrap{
                width:70%;
                // border: $border;
            }
        }
       
    }
}